import { onMounted, toRefs } from 'vue'
import { useMapStore } from '@/stores/map' // 使用pinia
const { map } = toRefs(useMapStore())

export const initMap = () => {
  //   const map = ref(null)
  onMounted(() => {
    console.log('initMap-onMounted')
    /*-------------- 图层 ---------------*/
    let key = '75a09498b55b9f6383269e8884371029'
    /* 1. 加载天地图的瓦片图层 */
    var TiandiMap_vec = new ol.layer.Tile({
      title: '天地图矢量图层',
      source: new ol.source.XYZ({
        url: `http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${key}`,
        wrapX: false,
        crossOrigin: 'Anonymous', //跨域参数
      }),
    })
    /* 天地图影像图层 */
    var TianDiMap_img = new ol.layer.Tile({
      title: '天地图影像图层',
      source: new ol.source.XYZ({
        url: `http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${key}`,
        wrapX: false,
        crossOrigin: 'Anonymous', //跨域参数
      }),
      visible: false,
    })
    /* 2. 加载天地图的注记图层 */
    var TiandiMap_cva = new ol.layer.Tile({
      title: '天地图矢量注记图层',
      source: new ol.source.XYZ({
        url: `http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${key}`,
        wrapX: false,
        crossOrigin: 'Anonymous', //跨域参数
      }),
    })
    /* 高德矢量图层-鹰眼 */
    var gaodeMapLayer = new ol.layer.Tile({
      title: '高德矢量图层',
      source: new ol.source.XYZ({
        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        wrapX: false,
        crossOrigin: 'Anonymous', //跨域参数
      }),
    })
    /* 3. 加载地图文档服务图层 */
    var ggDocLayer = new Zondy.Map.Doc('', 'guanggu', {
      //IP地址
      ip: import.meta.env.VITE_gisURL,
      //端口号
      port: '6163', //访问IGServer的端口号，.net版为6163，Java版为8089
      isBaseLayer: true,
      //控制条件
      // layers: 'show:1,2',
      crossOrigin: 'Anonymous', //跨域参数
    })
    /*----------------- 绘制 --------------------*/
    //加载测量的绘制矢量层
    var vectorMeasure = new ol.layer.Vector({
      source: new ol.source.Vector(),
      style: new ol.style.Style({
        //图层样式
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.2)', //填充颜色
        }),
        stroke: new ol.style.Stroke({
          color: '#ffcc33', //边框颜色
          width: 2, // 边框宽度
        }),
        image: new ol.style.Circle({
          radius: 7,
          fill: new ol.style.Fill({
            color: '#ffcc33',
          }),
        }),
      }),
    })
    /*------------------ 控件 --------------------*/
    /* 设置导航控件 */
    const ZoomToExtent = new ol.control.ZoomToExtent({
      extent: [114.34, 30.455, 114.41, 30.53], //左下, 右上
    })
    console.log(ZoomToExtent)
    // map.addControl(ZoomToExtent)

    //实例化缩放控件并加载到地图容器中
    var zoomslider = new ol.control.ZoomSlider()
    // map.addControl(zoomslider)

    //实例化鼠标位置控件（MousePosition）
    var mousePositionControl = new ol.control.MousePosition({
      //坐标格式
      coordinateFormat: ol.coordinate.createStringXY(4),
      //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
      projection: 'EPSG:4326',
      //坐标信息显示样式类名，默认是'ol-mouse-position'
      className: 'custom-mouse-position',
      //显示鼠标位置信息的目标容器
      target: document.getElementById('mouse-position'),
      //未定义坐标的标记
      undefinedHTML: '&nbsp;',
    })
    // map.addControl(mousePositionControl)

    //实例化比例尺控件（ScaleLine）
    var scaleLineControl = new ol.control.ScaleLine({
      //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
      // units: 'metric',
    })
    // map.addControl(scaleLineControl)

    //实例化鹰眼控件（OverviewMap）,自定义样式的鹰眼控件
    var overviewMapControl = new ol.control.OverviewMap({
      //鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used）
      className: 'ol-overviewmap ol-custom-overviewmap',
      //鹰眼中加载同坐标系下不同数据源的图层
      layers: [gaodeMapLayer],
      //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
      collapseLabel: '\u00BB',
      //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
      label: '\u00AB',
      //初始为展开显示方式
      collapsed: false,
      view: new ol.View({
        center: [114, 30],
        minZoom: 4,
        maxZoom: 18,
        projection: 'EPSG:4326',
      }),
    })
    // map.addControl(overviewMapControl)
    /*------------------ 地图 --------------------*/
    map.value = new ol.Map({
      target: 'map',
      layers: [
        TiandiMap_vec,
        TianDiMap_img,
        TiandiMap_cva,
        ggDocLayer,
        vectorMeasure, // 测量
      ],
      view: new ol.View({
        projection: 'EPSG:4326',
        center: [114.38, 30.49],
        zoom: 13.8,
        minZoom: 7,
        maxZoom: 18,
      }),
      controls: ol.control
        .defaults({
          /** @type {olx.control.AttributionOptions} */
          attributionOptions: {
            collapsible: true,
          },
        })
        .extend([
          ZoomToExtent,
          zoomslider,
          mousePositionControl,
          scaleLineControl,
          overviewMapControl,
        ]),
    })
  })
  return { map }
}
